<template>
  <!-- qpp是最大的组件 是其他组件的父组件 app中有什么 页面才会显示什么 -->
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- 3.使用 -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <hr> -->
    <!-- <Hello></Hello> -->
    <!-- <Cart></Cart> -->
    <!-- 路由的组件 动态组件 路由视图 -->
    <!-- 根据地址不同 渲染不同的组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 1.引入组件
import HelloWorld1 from "./components/HelloWorld.vue";
import Hello from "./views/Hello.vue";
import Cart from "./views/CartIndex.vue";

export default {
  name: "App",
  components: {
    // 2.注册
    HelloWorld: HelloWorld1,
    Hello,
    Cart,
  },
};
</script>

<style>
/* reset.css */

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}

body,
button,
input,
select,
textarea {
  font: 12px/1.5tahoma, arial, \5b8b\4f53;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

address,
cite,
dfn,
em,
var {
  font-style: normal;
}

code,
kbd,
pre,
samp {
  font-family: couriernew, courier, monospace;
}

small {
  font-size: 12px;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

legend {
  color: #000;
}

fieldset,
img {
  border: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /* margin-top: 60px; */
}
/* .router-link-exact-active {
  color: blue;
} */
.live111 {
  color: red;
}
</style>
